<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
		<style>
			body{
				background-color: rgb(40, 44, 53);
				perspective: 600px;
			}
			.cards{
				margin: 100px auto 0 auto;
				width: 330px;
				height: 460px;
				background: url('img/138_hires.png') no-repeat;
				background-size: cover;
				border-radius: 20px;
				transition: 0.1s all;
				box-shadow: 2px 2px 5px #fff782,-2px -2px 5px #fff782;
				position: relative;
				overflow: hidden;
			}
			.cards:hover{
				/* transform: rotateX(-14deg) rotateY(-24deg); */
			}
			.helight{
				position: absolute;
				width: 1000px;
				height: 1000px;
				background: radial-gradient(rgba(256,256,256,0.8) 15%,rgba(255,255,255,0),rgba(255,255,255,0)70%);
				border-radius: 50%;
				top: 200px;
				left: 300px;
				mix-blend-mode: soft-light;
			}
			.cards::before{
				background-color: aqua;
				width: 100%;
				height: 100%;
			}
		</style>
		
	</head>
	<body>
		<div class="cards">
			<div class="helight">
				
			</div>
		</div>
	</body>
	<script>
		$('.cards').mousemove(function(e){
			var positionX = e.pageX-$(this).offset().left;
			var positionY = e.pageY-$(this).offset().top;
			var minX = $(this).width()/2;
			var minY = $(this).height()/2;
			var hunX = 14*((minX-positionX)/minX);
			var hunY = 24*((minY-positionY)/minY);
			console.log(positionX,positionY);
			$(this).css({
			'transform':' rotateX('+(-hunX)+'deg) rotateY('+(-hunY)+'deg)',
			'transition':'none'
			});
			$(this).find($('.helight')).css({
				'top':(positionY-500)+'px',
				'left':(positionX-500)+'px',
			})
		}).mouseenter(function(){
			var positionX = e.pageX-$(this).offset().left;
			var positionY = e.pageY-$(this).offset().top;
			var minX = $(this).width()/2;
			var minY = $(this).height()/2;
			var hunX = 14*((minX-positionX)/minX);
			var hunY = 24*((minY-positionY)/minY);
			console.log(positionX,positionY);
			$(this).css({
			'transform':' rotateX('+(-hunX)+'deg) rotateY('+(-hunY)+'deg)',
			});
			$(this).find($('.helight')).css({
				'top':(positionY-500)+'px',
				'left':(positionX-500)+'px',
			})
		});
		$('.cards').mouseout(function(){
			$(this).css({
				'transform':' rotateX(0deg) rotateY(0deg)',
				'transition':'1s all'
			});
			$(this).find($('.helight')).css({
				'top':'400px',
				'left':'500px',
			})
		})
	</script>
</html>
